<template>
    <el-button type="primary" @click="dialogVisible = true">
        注册
    </el-button>

    <el-dialog
            v-model="dialogVisible"
            width="1110"
            :before-close="handleClose"
            style="text-align: center;overflow: hidden;padding: 0;position:relative;"
    >
        <template #header>
            <span style="font-size: 28px;font-weight: bolder;color: mediumvioletred">欢迎来到oss社区</span>
        </template>
        <div>
            <a href="javascript:void(0)" @click="select=false">已有账号？立即登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="javascript:void(0)" @click="select=true">没有账号？立即注册</a>
        </div>
        <reg v-if="select" style="float: left"/>
        <login v-else style="float: right"/>
        <img v-if="select" src="dynamic-Img.gif" alt="图片损坏" width="560" style="z-index: 999;position:absolute;top: 60px;right: 0">
        <img v-else src="dynamic-Img.gif" alt="图片损坏" width="560" style="z-index: 999;position:absolute;top: 60px;left: 0">
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import Reg from "@/components/Reg.vue";
import Login from "@/components/Login.vue";

const dialogVisible = ref(false)


const select = ref(true);


const handleClose = () => {
   dialogVisible.value=false;
}
</script>
<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
